<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
		                                     initial-scale=1.0,
		                                     maximum-scale=1.0,
		                                     user-scalable=no">


    <title id="title_head">我爱面试</title>

    <link rel="shortcut icon" href="image/favicon.ico" type=”../image/x-icon”/>

    <meta name="description" content="提供最新的面试题和题目解析,帮助你在面试的道路上越走越远."/>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <link rel="stylesheet" href="css/nav.css">

    <script src="../code/public_code.js"></script>

    <script src="../code/jquery-3.4.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #FBFBFB;
        }

        .neiru {
            background-color: #FFFFFF;
        }


        .nav2 img:hover {
            cursor: pointer;
        }

        .meiri div div {
            margin: 20px;

        }

        .meiri div div:hover {
            transform: scale(1.1);
        }

        .suiji {
            padding: 20px;
        }

        .shunjibut {
            animation: name 2s linear infinite alternate both;
            cursor: pointer;
        }

        @keyframes name {
            0% {
            }

            100% {
                transform: scale(1.5);
            }
        }

        .suiji ul li:hover {
            background-color: #d0d4df;
            cursor: pointer;
        }

        .zx ul {
            border-radius: 6px;
            border: 1px silver solid;
            margin: 10px 15px 25px 15px;
            box-shadow: 1px 1px 5px silver;
            padding: 15px;
        }

        .zx ul:hover {
            transform: scale(1.02);
            cursor: pointer;
        }

        .fenye img {
            cursor: pointer;
        }

        .fenye span {
            cursor: pointer;
        }

        .youce ul li:hover {
            background-color: #dfd4d5;
            cursor: pointer;
        }

        .carddh1:nth-of-type(1) {
            animation: name1 1.5s linear infinite alternate both;
            cursor: pointer;

        }

        @keyframes name1 {
            0% {
            }

            100% {
                transform: scale(1.05);
            }
        }

        .carddh1:nth-of-type(2) {
            animation: name1 2s linear infinite alternate both;
            cursor: pointer;
        }

        @keyframes name1 {
            0% {
            }

            100% {
                transform: scale(1.05);
            }
        }

        .carddh2:nth-of-type(1) {
            animation: name1 2.5s linear infinite alternate both;
            cursor: pointer;
        }

        @keyframes name1 {
            0% {
            }

            100% {
                transform: scale(1.05);
            }
        }

        .carddh2:nth-of-type(2) {
            animation: name1 3s linear infinite alternate both;
            cursor: pointer;
        }

        @keyframes name1 {
            0% {
            }

            100% {
                transform: scale(1.05);
            }
        }


        .title1 {
            animation: name2 10s linear infinite alternate both;
            cursor: pointer;
        }

        @keyframes name2 {
            0% {

                color: #000000;

            }
            10% {

                color: #9be200;

            }
            20% {

                color: #90d6d6;

            }
            30% {

                color: #dada00;

            }
            40% {

                color: #4ade00;

            }
            50% {

                color: #e699e6;

            }
            60% {

                color: #d6006b;

            }
            70% {

                color: #8c8cd0;

            }
            80% {

                color: #8e46d5;

            }
            90% {

                color: #00b900;

            }

            100% {
                color: #d04500;
            }
        }




        .cxul li {
            border-top: none;
            border-left: none;
            border-right: none;
            margin-top: 10px;

        }

        .cxul li:hover {
            cursor: pointer;
            background-color: #e3e3e3;


        }

      #sous432:hover{
          cursor:pointer;
      }
        #shous{
            /*去除边框*/
            border:none;
            /*去除点击后的边框*/
            box-shadow: 0px 0px 0px 0px;
            /*添加下划线  */
            border-bottom:#8D8D8D 1px solid;
            /*去掉默认背景颜色*/
            -webkit-box-shadow: 0 0 0 1000px white inset;

            color: rgba(110, 107, 94, 0.71);

        }



        #shous::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: rgba(110, 107, 94, 0.18);
        }

        #itmes-1 li:hover{
            background: #8D8D8D;
        }

      </style>

</head>
<body>


<div id="example1" >
    <ul class="nav justify-content-center fixed-top">
        <li  class="nav-item">
            <nav class="menu-activea    d-xl-none d-md-inline-block"  >
                <h1 class="title1" style="background: rgba(239,235,235,0.34)">Menu</h1>
                <ul id="itmes-1" >
                    <li v-for="(stu,index) in items" v-on:click="itemslieb1(index)"  v-bind:id="stu.id" >
                        <a v-bind:href="index_href[index]" target="_blank" style="text-decoration:none;color: #ffffff">
                           {{stu.title_name}}
                        </a>

                    </li>

                </ul>
            </nav>
        </li>
        <li class="nav-item">
            <a class="nav-link  title1" href="#"  > 我爱面试</a>
        </li>
        <li class="nav-item">
            <!-- Button trigger modal -->
            <img src="image/搜索.png"  width="34" height="34"
                 id="sous432" data-toggle="modal" data-target="#staticBackdrop"/>
        </li>
    </ul>



    <div class="container-fluid">


        <!-- Modal -->
        <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">

                            <input id="shous" size="120"  class="form-control form-control-lg" type="text" @input="input_shous()" placeholder="请输入你要查询的内容">

                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body " >
                        <ul class="list-group cxul" >
                            <li class="list-group-item" v-for="(item, index) in shous_items">
                                <a v-bind:href="item.url_params"  target="_blank" v-html="item.head" class="text-decoration-none text-muted"></a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>






        <div class="row ml-xl-4 ">

            <div class="col-xl-9  col-lg-12  neiru shadow p-3 mb-xl-5 bg-white rounded ">

                <div class="m-xl-2  meiri  ">
                    <p>
                        <img src="image/书.png" class="m-4"/>
                        <span class="p-1">每日精选</span>
                    </p>

                    <div class=" row d-flex justify-content-around">
                        <div class="carddh1 card text-center col-xs-12 shadow-sm p-3 mb-5 bg-white rounded rounded-lg"
                             style="width: 21rem; height: 380px"   v-for="(item, index) in recommend1">
                            <div class="card-body">
                                <img src="image/图标211.png"/>
                                <h5 class="card-title text-truncate">{{item.head}}</h5>
                                <p class="card-text ">{{item.answer}}</p>
                                <a v-bind:href="index_href_tj1[index]"  target="_blank"  class=" btn btn-info">Go somewhere</a>

                            </div>
                        </div>

                    </div>

                    <div class=" row d-flex justify-content-around">
                        <div class="carddh2  card text-center shadow-sm p-3 mb-5 bg-white rounded rounded-lg"
                             style="width:  21rem; height: 380px"   v-for="(item, index) in recommend2">
                            <div class="card-body">
                                <img src="image/图标211.png"/>
                                <h5 class="card-title text-truncate">{{item.head}}</h5>
                                <p class="card-text">{{item.answer}}</p>
                                <a v-bind:href="index_href_tj2[index]"  target="_blank"  class=" btn btn-info">Go somewhere</a>
                            </div>
                        </div>

                    </div>
                </div>


                <div class="m-2 suiji " >
                    <p>
                        <img src="image/随机.png"/>
                        <span class="p-1">随机抽选</span>

                        <img src="image/随机caiz.png" class="  float-right d-inline  shunjibut" v-on:click="random()"/>
                        <img src="image/手指.png" class="float-right "/>
                    </p>
                    <div class="row d-flex justify-content-around ">
                        <ul class="list-group col-xl-6 col-lg-12">
                            <li class="list-group-item text-truncate  li1"  v-for="(item, index) in randoms1" >
                                <img src="image/图标94.png">
                                <a v-bind:href="index_href_sj1[index]"  target="_blank"  class="text-decoration-none text-muted">
                                <span> {{item.head}}</span>
                                </a>
                            </li>
                        </ul>


                        <ul class="list-group col-xl-6 col-lg-12">
                            <li class="list-group-item text-truncate  li1" v-for="(item, index) in randoms2">
                                <img src="image/图标94.png">
                                <a v-bind:href="index_href_sj2[index]"  target="_blank"  class="text-decoration-none text-muted">
                                <span> {{item.head}}</span>
                                </a>
                            </li>

                        </ul>

                    </div>


                </div>

                <div class="mt-3">
                    <p class="ml-4">
                        <img src="image/热度.png"/>
                        <span class="p-1">最新文章</span>
                    </p>


                    <div style="height: 600px;" class="overflow-auto  zx">


                        <ul style="list-style:none;"   v-for="(item, index) in contents.list">
                            <a v-bind:href="index_href_zx[index]" target="_blank" class="text-decoration-none text-muted">
                            <li><img src="image/22.png"/></li>
                            <li class="text-center   text-truncate">{{item.head}}</li>
                            <li>
                                <hr/>
                            </li>
                            <li>
                                {{item.answer}}

                            </li>
                            </a>
                        </ul>


                    </div>


                    <div>
                        <form class="form-inlineposition-absolute mt-3  fenyefor" style="left: 250px; display: none;"
                              action="#">
                            <div class="form-group mb-2">
                                <input type="text" readonly class="form-control-plaintext ml-3" id="staticEmail2"
                                       value="跳转第几页">
                            </div>
                            <div class="form-group mx-sm-3 mb-2">

                                <input type="text" class="form-control" id="inputPassword2" placeholder="输入要跳转的页数">
                            </div>
                            <button type="button" class="btn btn-primary mb-2  ml-3 sub" v-on:click="tj()">提交</button>
                        </form>


                        <p class="text-center   fenye">

                            <img src="image/左.jpg" class="float-left" v-on:click="zuo()"/>
                            <span class="fye"> <span class="h3 "> {{contents.current_Page}}</span> <span class="h3 "> /</span> <span
                                    class="h3 "> {{contents.page_Total__Seize}}</span> </span>
                            <img src="image/右.jpg" class="float-right" v-on:click="you()"/>
                        </p>
                    </div>
                </div>


            </div>


            <!-- 右侧 -->
            <div class="col-3   d-none d-xl-block  mt-3  youce " style="height: 1000px;" class="m-2">
                <div class="text-center " style="right: 100px;">
                    <h3>胡安民</h3>
                    <img src="image/title-image.jpg" alt=""/>
                     <p>面试跪,面试一直跪</p>
<!--                    <p><span class="font-weight-bold">l</span> love you</p>-->
                    <ul class="list-group">

                        <li v-for="(stu,index) in items"
                            class="list-group-item d-flex justify-content-between align-items-center ">
                           <a v-bind:href="index_href[index]" target="_blank" class="text-decoration-none text-muted">
                             <span class="text-truncate d-inline">{{stu.title_name}}</span>
                            <span class="badge badge-primary badge-pill">{{stu.size}}</span>
                           </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>

    </div>



    </el-row>
</div>



<script>
    $(function () {



        var example1 = new Vue({
            el: '#example1',
            data: {
                items: [],   //列表
                contents: {},   //分页内容
                randoms1:[],   //随机文章 前5篇
                randoms2:[],   //随机文章 后5篇
                recommend1:[],  //每日精选 前2篇
                recommend2:[],   //每日精选 后2篇
                index_href: new Array(),
                index_href_sj1: new Array(),
                index_href_sj2: new Array(),
                index_href_tj1: new Array(),
                index_href_tj2: new Array(),
                index_href_zx: new Array(),
                shous_items: new Array(),
                activeIndex: '1',
                activeIndex2: '1'

            },
            beforeCreate() {
                //发送get请求  列表数据
                this.$http.get('http://'+http_ip+':8083/feign_title').then(function (res) {
                    this.items = res.data.data;

                    console.log(this.items)


                    // 设置seo 搜索引擎的 关键字
                    var items=""
                    for (let i = 0; i <this.items.length ; i++) {
                        items+=this.items[i].title_name.trim()+","
                    }
                    items=items.substring(0,items.length-1)
                    $("#title_head").after("<meta name=\"keywords\" content=\"我爱面试,面试题网站,面试题大全,面试题每日精选,面试题随机抽选,最新面试题"+items+"\"/>")


                    var arr=new Array();
                    $.each(this.items,function (i,e) {
                        var   str="./item.html?titleId="+e.id+""
                        arr.push(str);
                    })
                    this.menu();
                    this.index_href=arr

                }, function () {
                    console.log('请求失败处理');
                });




                //发送get请求  分页数据 (最新文章)
                this.$http.get('http://'+http_ip+':8083/feign_article/queryAll/1/10').then(function (res) {
                    this. contents = res.data;

                    for (let i = 0; i <this.contents.list.length ; i++) {
                        var answer=this.contents.list[i].answer
                        if(answer.length>100){
                            this.contents.list[i].answer=answer.substring(0,150)+"...";
                        }
                    }

                    var arr=new Array();
                    $.each(this.contents.list,function (i,e) {
                        var   str="./context.html?catalogueId="+e.id+""
                        arr.push(str);
                    })
                   this.index_href_zx=arr

                }, function () {
                    console.log('请求失败处理');
                });





                               //发送get请求  随机文章
                this.$http.get('http://'+http_ip+':8083/feign_article/queryRandom').then(function (res) {

                    for (let i = 0; i <5 ; i++) {
                       this.randoms1.push(res.data.data[i])
                    }
                    for (let i = 5; i <10 ; i++) {
                        this.randoms2.push(res.data.data[i])
                    }
                    var arr1=new Array();
                    $.each(this.randoms1,function (i,e) {
                        var   str="./context.html?catalogueId="+e.id+""
                        arr1.push(str);
                    })
                    this.index_href_sj1=arr1

                    var arr2=new Array();
                    $.each(this.randoms2,function (i,e) {
                        var   str="./context.html?catalogueId="+e.id+""
                        arr2.push(str);
                    })
                    this.index_href_sj2=arr2



                }, function () {
                    console.log('请求失败处理');
                });


                //发送get请求  推荐文章
                this.$http.get('http://'+http_ip+':8083/feign_article/queryRecommend').then(function (res) {


                    for (let i = 0; i <2 ; i++) {

                        var answer=res.data.data[i].answer
                        if(answer.length>70){
                            res.data.data[i].answer=answer.substring(0,81)+"...";
                        }

                        this. recommend1.push(res.data.data[i])

                    }
                    for (let i = 2; i <4 ; i++) {

                        var answer=res.data.data[i].answer
                        if(answer.length>70){
                            res.data.data[i].answer=answer.substring(0,81)+"...";
                        }

                        this. recommend2.push(res.data.data[i])
                    }
                    var arr1=new Array();
                    $.each( this. recommend1,function (i,e) {
                        var   str="./context.html?catalogueId="+e.id+""
                        arr1.push(str);
                    })
                    this.index_href_tj1=arr1
                    var arr2=new Array();
                    $.each( this. recommend2,function (i,e) {
                        var   str="./context.html?catalogueId="+e.id+""
                        arr2.push(str);
                    })
                    this.index_href_tj2=arr2



                }, function () {
                    console.log('请求失败处理');
                });


            },
            methods:{
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },
                //分页跳转
                tj:function(){
                   var aa = $("#inputPassword2").val();
                   console.log(aa)
                    //发送get请求  分页数据
                    this.$http.get('http://'+http_ip+':8083/feign_article/queryAll/'+aa+'/10').then(function (res) {

                        this. contents =  res.data;

                        for (let i = 0; i <this.contents.list.length ; i++) {
                            var answer=this.contents.list[i].answer
                            if(answer.length>=250){
                                this.contents.list[i].answer=answer.substring(0,250)+"...";
                            }
                        }


                        var arr=new Array();
                        $.each(this.contents.list,function (i,e) {
                            var   str="./context.html?catalogueId="+e.id+""
                            arr.push(str);
                        })
                        this.index_href_zx=arr
                    }, function () {
                        console.log('请求失败处理');
                    });
                },
                //随机文章
                random:function(){
                    this.randoms1=[]
                    this.randoms2=[];
                    //发送get请求  随机文章
                    this.$http.get('http://'+http_ip+':8083/feign_article/queryRandom').then(function (res) {

                        for (let i = 0; i <5 ; i++) {
                            this.randoms1.push(res.data.data[i])
                        }
                        for (let i = 5; i <10 ; i++) {
                            this.randoms2.push(res.data.data[i])
                        }

                        var arr1=new Array();
                        $.each(this.randoms1,function (i,e) {
                            var   str="./context.html?catalogueId="+e.id+""
                            arr1.push(str);
                        })
                        this.index_href_sj1=arr1

                        var arr2=new Array();
                        $.each(this.randoms2,function (i,e) {
                            var   str="./context.html?catalogueId="+e.id+""
                            arr2.push(str);
                        })
                        this.index_href_sj2=arr2

                    }, function () {
                        console.log('请求失败处理');
                    });


                },
                //左分页
                zuo:function(){

                    var zuo=this.contents.page_Up;

                    //发送get请求  分页数据
                    this.$http.get('http://'+http_ip+':8083/feign_article/queryAll/'+zuo+'/10').then(function (res) {
                        this. contents= res.data;
                        for (let i = 0; i <this.contents.list.length ; i++) {
                            var answer=this.contents.list[i].answer
                            if(answer.length>=250){
                                this.contents.list[i].answer=answer.substring(0,250)+"...";
                            }
                        }
                        var arr=new Array();
                        $.each(this.contents.list,function (i,e) {
                            var   str="./context.html?catalogueId="+e.id+""
                            arr.push(str);
                        })
                        this.index_href_zx=arr
                    }, function () {
                        console.log('请求失败处理');
                    });

                },
                //右分页
                you:function(){

                    var you=this.contents.page_Dn;
                    //发送get请求  分页数据
                    this.$http.get('http://'+http_ip+':8083/feign_article/queryAll/'+you+'/10').then(function (res) {
                        this. contents = res.data;
                        for (let i = 0; i <this.contents.list.length ; i++) {
                            var answer=this.contents.list[i].answer
                            if(answer.length>=250){
                                this.contents.list[i].answer=answer.substring(0,250)+"...";
                            }
                        }
                        var arr=new Array();
                        $.each(this.contents.list,function (i,e) {
                            var   str="./context.html?catalogueId="+e.id+""
                            arr.push(str);
                        })
                        this.index_href_zx=arr
                    }, function () {
                        console.log('请求失败处理');
                    });
                },

            //下拉框
                menu:function(){
                    var nav = $('nav'),
                        menu = $('nav h1'),
                        main = $('main'),
                        open = false,
                        hover = false;

                    menu.on('click', function () {
                        open = !open ? true : false;
                        nav.toggleClass('menu-active');
                        main.toggleClass('menu-active');
                        nav.removeClass('menu-hover');
                        main.removeClass('menu-hover');
                        console.log(open);
                    });
                    menu.hover(
                        function () {
                            if (!open) {
                                nav.addClass('menu-hover');
                                main.addClass('menu-hover');
                            }
                        },
                        function () {
                            nav.removeClass('menu-hover');
                            main.removeClass('menu-hover');
                        }
                    );
                },
                //返回首页
                index:function () {

                    location.href="./index.html"

                },
                //用户输入时候: 搜索查询文章
                input_shous:function(){
                    var shous=  $("#shous").val()
                    if(shous.trim()==""){
                        return;
                    }

                    this.$http.get('http://'+http_ip+':8083/feign_solr?title='+shous).then(function (res) {
                           this.shous_items= $.parseJSON(res.bodyText)
                        for (let i = 0; i <this.shous_items.length ; i++) {
                            this.shous_items[i].url_params = "context.html?"+this.shous_items[i].url_params
                        }


                    }, function () {
                        console.log('请求失败处理');
                    });


                }

            }


        })
    })



    $(function () {


        $(".container-fluid").click(function () {
            var nav = $('nav');
            nav.removeClass('menu-active');
        })

        $(document).scroll(function () {

            var nav = $('nav');
            nav.removeClass('menu-active');
        })


        $(".fye").click(function () {
            $(".fenyefor").show()
        })

        $(".sub").click(function () {
            $(".fenyefor").hide()
        })


    })



</script>



</body>
</html>
